$nt-scrim-background: rgba(255, 255, 255, .6) !default;
$nt-scrim-loading-size: 3rem !default;
$nt-scrim-loading-color: get-color(primary) !default;
$nt-scrim-loading-border-size: 3px !default;
$nt-scrim-loading-border-color: $light-gray !default;

@keyframes rotate {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}

@mixin nt-scrim-loading {
  display: inline-block;
  width: $nt-scrim-loading-size;
  height: $nt-scrim-loading-size;
  border-style: solid;
  border-width: $nt-scrim-loading-border-size;
  border-color: $nt-scrim-loading-border-color;
  border-top-color: $nt-scrim-loading-color;
  border-radius: 50%;
  animation: 1s linear infinite rotate;
}

@mixin nt-scrim {

  .nt-scrim {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    background-color: $nt-scrim-background;
    border-radius: inherit;
    padding: 1rem;

    .nt-scrim-text {
      text-align: center;
      margin: 0;
    }
    .nt-scrim-animation {
      padding: 1rem;
      text-align: center;
    }

    .nt-scrim-loading {
      @include nt-scrim-loading;
    }
  }
}
